<template>
  <div class="header-container">
    <div class="l-content">
      <el-button @click="handleMenu" icon="el-icon-menu" size="mini" class="menu-button"></el-button>
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{ item.label }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown @command="handleClick">
        <span class="el-dropdown-link">
          <img class="user" src="../assets/images/user.png" alt="">
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cookie from 'js-cookie'
export default {
  methods: {
    handleMenu() {
      // 相当于调用这个方法
      this.$store.commit('CollapseMenu')
    },
    handleClick(command) {
      if (command === 'logout') {
        this.$cookies.remove('user')
        this.$router.push('/login')
      }
    }
  },
  computed: {
    ...mapState({
      tags: state => state.tab.tabList
    })
  }
}
</script>

<style lang="less" scoped>
.header-container {
  background: linear-gradient(to right, #f2f2f2 ,#FCE4EC); /* 粉色到浅灰色的渐变 */
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;

    .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    }
  }

  .menu-button {
    background-color: #f2f2f2;
    border: none;
    color: #333;
    font-size: 14px;

    &:hover {
      background-color: #e0e0e0;
    }
  }
}

.l-content {
  display: flex;
  align-items: center;

  .el-breadcrumb {
    margin-left: 15px;

    /deep/.el-breadcrumb__item {
      .el-breadcrumb__inner {
        &.is-link {
          color: #333;
        }
      }

      &:last-child {
        .el-breadcrumb__inner {
          color: #333;
        }
      }
    }
  }
}

.el-dropdown-menu {
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .el-dropdown-menu__item {
    color: #333;

    &:hover {
      background-color: #e0e0e0;
    }
  }
}
</style>
